<!--
 * @Author: boyyang
 * @Date: 2022-02-20 00:27:19
 * @LastEditTime: 2022-02-20 02:09:55
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\imgPreview\index.vue
-->

<template>
    <div class="img-preview" v-if="props.isShow" @click="close">
        <img :src="props.url" @click.stop/>
        <div class="buttons" @click.stop>
            <preview-button @iconClick="iconClick"></preview-button>
        </div>
        <i class="iconfont icon-qingchu close-icon" @click="close"></i>
    </div>
</template>

<script lang="ts" setup>
interface IImgPreviewProps {
    url?: string;
    isShow?: boolean;
}

interface IImgPreviewEmits {
    (e: 'update:isShow', val: boolean): void
}

const props = withDefaults(defineProps<IImgPreviewProps>(), {
    isShow: false
})

const emits = defineEmits<IImgPreviewEmits>()

const scale_num = ref<number>(1)
const transform_num = ref<number>(0)

const iconClick = (index: number) => {
    switch (index) {
        case 0:
            if (scale_num.value > 1.4) {
                return
            }
            scale_num.value += 0.2
            break
        case 1:
            if (scale_num.value < 0.4) {
                return
            }
            scale_num.value -= 0.2
            break
        case 2:
            transform_num.value += 90
            break
        case 3:
            transform_num.value -= 90
            break
        case 4:
            download()
            break
        default:
            return
    }
}

const close = () => {
    scale_num.value = 1
    transform_num.value = 0
    emits('update:isShow', false)
}

const download = () => {
    let src = props.url as string
    window.open(src, '_black')
}
</script>

<style scoped lang="scss">
.img-preview {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);

    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    z-index: 99;

    img {
        height: 80%;

        transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

        transform: scale(v-bind(scale_num))
            rotateZ(calc(v-bind(transform_num) * 1deg));
    }

    .buttons {
        position: absolute;
        bottom: 30px;
    }

    .close-icon {
        position: absolute;
        right: 15px;
        top: 55px;

        font-size: 25px;
        color: whitesmoke;

        cursor: pointer;

        &:hover {
            color: aquamarine;
        }
    }
}
</style>
